<template>
  <div class="page">
    <div style="width:100%;">
      <mt-header fixed title="行情" style="background:#242D36;color:#fff;border-bottom:1px solid #d2d2d2;">

      </mt-header>
      <div style="width: 100%;height:.95rem;"></div>
      <div class="top">
        <div class="top-lt">行情</div>
        <div class="top-rt" @click="refresh">刷新</div>
      </div>
      <div class="market">
        <div class="market-header">
          <div class="item">名称</div>
          <div class="item">最新价 </div>
          <div class="item"> 涨跌</div>
          <div class="item"> 涨跌幅</div>
        </div>
        <div class="market-list"  v-for="(item, index) in tablist.symbols" :key="index" @click="getItem(item)">
          <div class="item item1">
            <div class="name1" >{{item.name_code}}</div>
            <div class="name2">{{item.name}}</div>
          </div>
          <div class="item" :class="
            (old_list[item.code2] && old_list[item.code2].price) > (ticket[item.code2] && ticket[item.code2].price)
              ? 'tiket_btn color_r'
              : (old_list[item.code2] && old_list[item.code2].price) == (ticket[item.code2] && ticket[item.code2].price)
              ? 'tiket_btn'
              : 'tiket_btn color_g'
          "> {{ ((ticket[item.code2] && ticket[item.code2].price) || 0).toFixed(2) || '- -' }}</div>
          <div class="item" v-if="item.diff>0">+{{item.diff}}</div>
          <div class="item" v-else-if="item.diff<=0">{{item.diff}}</div>
          <div class="item" :class="(ticket[item.code2] && ticket[item.code2].wave) >= 0 ? 'tiket_btn color_r' : 'tiket_btn color_g'"> {{ ((ticket[item.code2] && ticket[item.code2].wave) || 0).toFixed(2) || '- -' }}%</div>
        </div>
      </div>

      <div>
        <commonFooter active="gonggao"></commonFooter>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import commonFooter from './footer';
  export default {
    computed: mapState({
      select: state => state.trade.select /* 当前选中股指 */,
      symbol: state => state.trade.symbol /* 全部行情 */,
      symbos: state => state.trade.symbos /* 当前页面显示 */,
      ticket: state => state.trade.ticket /* 推送数据 */
    }),
    name: 'market',
    data() {
      return {
        list: [],
        connected: false,
        connecting: false,
        socketTask: null,
        wsUrl: '',
        listinclass: -1, //底部选项卡
        symbollist: [] /* 全部静态行情 */,
        tablist: [] /*, 当前数据 */,
        tablistcode: [], //当前页面的code码
        old_list: [] /* 对比行情数据 */,
        page_list: false, //数据分页判断
        pages: 1, //分页总计
        newpage: 1 //当前页码
      };
    },
    components: {
      commonFooter, //  底部导航
    },
    computed: {},

    created() {

    },
    watch: {
      symbol(val) {
        console.log('val')
         console.log(val)
        for (let i in val) {
          this.symbollist.push(val[i]);
        }
        this.listinclass = 0;
        this.$store.commit('trade/setSymbos', this.symbollist[0]);
      },
      ticket(val) {
        let that = this;
        setTimeout(() => {
          return (that.old_list = val);
        }, 500);
      },
      // page_list(val) {
      //   if (val == false) {
      //     $('.tab_list').css('height', 'calc(100% - 2.8rem)');
      //   } else if (val == true) {
      //     $('.tab_list').css('height', 'calc(100% - 3.8rem)');
      //   }
      // },
      symbos(val) {
        this.tablist = val;
        this.newpage = 1;
        // this.pageslist(this.tablist, 1);
      }
    },
    mounted() {
      console.log('this.symbol')
      console.log(this.tablist)
      for (let i in this.symbol) {
        this.symbollist.push(this.symbol[i]);
      }
      if (this.symbollist.length == 0) {
        this.listinclass = -1;
        this.tablist = [];
      } else {
        this.listinclass = 0;
        this.tablist = this.symbollist[0];
        // this.pageslist(this.tablist, 1);
      }
    },
    methods: {
      // change() {
      //   this.$get('addons/tf-futures/symbol/sym-list').then(res => {
      //     if (res.code == 200) {
      //       this.list = res.data;
      //     }
      //   })
      // },
      refresh() {
        // this.change();
      },
      getItem(item) {
        this.$store.commit('trade/select', item);
        this.$store.commit('set', { checkselect: false });
        this.$router.push({ path: 'klinepage' });
        // this.$router.push({ path: 'detail' });
      },
      // 处理数据过多时候
      pageslist(infolist, pagesnum) {
        this.pages = Math.ceil(infolist.length / 50);
        if (infolist.length > 50) {
          this.page_list = true;
          if (Number(pagesnum) < 2) {
            // console.log('第一页');
            this.tablist = infolist.slice(0, 50);
          } else if (Number(pagesnum) == this.pages) {
            // console.log('最后页');
            let startnum = 50 * (Number(pagesnum) - 1);
            this.tablist = infolist.slice(startnum);
          } else {
            // console.log('第',pagesnum,'页')
            let startnum = 50 * (Number(pagesnum) - 1);
            let endnum = 50 * Number(pagesnum);
            this.tablist = infolist.slice(startnum, endnum);
          }
        } else {
          this.page_list = false;
        }
        if (this.tablist.length > 0) {
          this.tablistcode = [];
          for (let i = 0; i < this.tablist.length; i++) {
            this.tablistcode[i] = this.tablist[i].code;
          }
          this.tablistcode = this.tablistcode.join(',');
          this.$store.commit('set', { tablistcode: this.tablistcode });
        }
      },
      // 输入跳转页码
      pagesnum() {
        this.newpage = Number(this.newpage);
      },
      // 分页按钮
      jumppages(pageinfo) {
        if (pageinfo == 'pre') {
          // console.log('上一页')
          this.newpage--;
        } else if (pageinfo == 'next') {
          // console.log('下一页')
          this.newpage++;
        } else if (pageinfo == 'btn') {
          // console.log('跳转')
          this.newpage = Number(this.newpage);
        }
        this.pageslist(this.symbos.symbols, this.newpage);
      }
      // // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
      // wsMessage(data) {
      //   const dataJson = data
      //   console.log(dataJson)
      //   // 这里写拿到数据后的业务代码
      // },
      // // ws连接失败，组件要执行的代码
      // wsError() {
      //   // 比如取消页面的loading
      // },
      // requstWs() {
      //   // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
      //   closeWebsocket()
      //   // 跟后端协商，需要什么参数数据给后台
      //   const obj = {
      //     monitorUrl: 'xxxxxxxxxxxxx',
      //     userName: 'xxxxxxxxxx'
      //   }
      //   // 发起ws请求
      //   sendWebsocket('', obj, this.wsMessage, this.wsError)
      // }
    }
  };
</script>

<style scoped>
  .color_r {
    color: #ff210d;
  }
  .color_g {
    color: #00dc00;
  }
  .list_tiket {
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #222;
  }
   .tiket_btn {
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.32rem;
    box-sizing: border-box;
  }
  .market .market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .4rem;
    border-bottom: 1px solid #747673;
  }

  .market .market-header .item {
    color: #fff;
    font-size: 27px;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .market .market-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .4rem;
    border-bottom: 1px solid #747673;
  }

  .market .market-list .item {
    color: #d62c2c;
    font-size: 27px;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .market .market-list .item1 {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

  }

  .market .market-list .item1 .name1 {
    color: #eb9f55;
    font-size: 27px;
  }

  .market .market-list .item1 .name2 {
    color: #fff;
    font-size: 27px;
  }

  /deep/ .mint-header {
    border-bottom: none !important;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .48rem .6rem;
    border-bottom: 1px solid #747673;
  }

  .top .top-lt {
    color: #fff;
    font-size: 34px;
  }

  .top .top-rt {
    color: #D18E57;
    font-size: 27px;
  }

  .page {
    background: #121411;
    color: #f0f0f0;
    width: 100%;
    height: 100vh;
  }

  .gonggao-border {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;
  }

  .gonggao-list {
    border: 1px solid #000000;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
  }

  .gonggao-list .gonggao-title {
    width: 100%;
    /* height: 30px; */
    text-align: center;
    margin-bottom: 10px;
    font-size: 0.5rem;
  }

  .gonggao-list .gonggao-info {
    padding: 15px;
    width: 100%;
  }

  .gonggao-list .gonggao-time {
    text-align: right;
    width: 100%;
    height: 30px;
  }
</style>
